<!DOCTYPE html>
<html>
<head>
    <title>Physics Diagram Recreation</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-color: #f0f0f0;
        }
        canvas {
            border: 1px solid #ccc;
            background-color: #fff;
        }
    </style>
</head>
<body>
    <canvas id="physicsCanvas" width="600" height="450"></canvas>
    <script>
        const canvas = document.getElementById('physicsCanvas');
        const ctx = canvas.getContext('2d');

        // Function to draw text with a subscript
        function drawSubscriptedText(ctx, text, sub, x, y, baseFontSize = 22, subFontSize = 16) {
            ctx.font = `italic ${baseFontSize}px Times New Roman`;
            ctx.textAlign = 'center';
            const textMetrics = ctx.measureText(text);
            const textWidth = textMetrics.width;
            
            // Adjust x to be the starting point for drawing
            const startX = x - textWidth / 2;

            ctx.fillText(text, startX + textWidth / 2, y);

            ctx.font = `italic ${subFontSize}px Times New Roman`;
            ctx.fillText(sub, startX + textWidth + 2, y + 5);
        }

        // Colors and Styles
        const blockFillColor = '#E0E0E0';
        const tableFillColor = '#F5F5F5';
        const strokeColor = '#000000';
        ctx.strokeStyle = strokeColor;
        ctx.lineWidth = 2;

        // 1. Draw the table
        ctx.beginPath();
        ctx.moveTo(50, 150);    // Top-left of surface
        ctx.lineTo(400, 150);   // Top edge of surface
        ctx.lineTo(400, 350);   // Inner vertical edge
        ctx.lineTo(420, 350);   // Bottom of vertical leg
        ctx.lineTo(420, 170);   // Outer vertical edge
        ctx.lineTo(50, 170);    // Bottom of surface
        ctx.closePath();
        ctx.fillStyle = tableFillColor;
        ctx.fill();
        ctx.stroke();

        // 2. Draw Block m2
        const m2 = { x: 140, y: 90, w: 100, h: 60 };
        ctx.fillStyle = blockFillColor;
        ctx.fillRect(m2.x, m2.y, m2.w, m2.h);
        ctx.strokeRect(m2.x, m2.y, m2.w, m2.h);

        // 3. Draw the Pulley
        const pulley = { x: 400, y: 130, r: 20 };
        ctx.beginPath();
        ctx.arc(pulley.x, pulley.y, pulley.r, 0, 2 * Math.PI);
        ctx.fillStyle = '#FFFFFF'; // Make it look like a wheel, not solid
        ctx.fill();
        ctx.stroke();
        // Axle of the pulley
        ctx.beginPath();
        ctx.arc(pulley.x, pulley.y, 3, 0, 2 * Math.PI);
        ctx.fillStyle = strokeColor;
        ctx.fill();

        // 4. Draw Block m1
        const m1 = { x: 390, y: 240, w: 60, h: 60 };
        ctx.fillStyle = blockFillColor;
        ctx.fillRect(m1.x, m1.y, m1.w, m1.h);
        ctx.strokeRect(m1.x, m1.y, m1.w, m1.h);

        // 5. Draw the Rope
        ctx.beginPath();
        ctx.lineWidth = 1.5;
        const ropeAttachY = m2.y + m2.h / 2 - 10; // Attach point slightly above middle of m2
        const ropeTangentY = pulley.y - pulley.r; // Top tangent of pulley
        const ropeTangentX = pulley.x + pulley.r; // Right tangent of pulley

        // Horizontal segment from m2 to pulley
        ctx.moveTo(m2.x + m2.w, ropeTangentY);
        ctx.lineTo(pulley.x, ropeTangentY);
        
        // Arc around the pulley
        ctx.arc(pulley.x, pulley.y, pulley.r, -Math.PI / 2, 0);

        // Vertical segment from pulley to m1
        ctx.lineTo(ropeTangentX, m1.y);
        ctx.stroke();
        
        // Reset line width
        ctx.lineWidth = 2;

        // 6. Add Labels
        // Label for m2
        drawSubscriptedText(ctx, 'm', '2', m2.x + m2.w / 2, m2.y - 15);
        
        // Label for m1
        drawSubscriptedText(ctx, 'm', '1', m1.x + m1.w + 25, m1.y + m1.h / 2 + 5);

        // Bottom Caption
        ctx.font = '24px KaiTi'; // A common Chinese font
        ctx.fillStyle = '#333';
        ctx.textAlign = 'center';
        ctx.fillText('习题 3-3 图', canvas.width / 2, 420);

    </script>
</body>
</html>